<template>
  <el-table
      class="main-table"
      :data="copyTableData"
      style="width: 100%"
      size="small"
      header-row-class-name="table-header"
      header-cell-class-name="table-header-cell"
      row-class-name="table-row"
      row-key="id"
  >
    <el-table-column
      v-for="(colItem, colIndex) of columnData"
      :key="colItem.id"
      :type="colItem.type"
      :prop="colItem.key"
      :label="colItem.label"
      :width="colItem.width"
      align="center"
      reserve-selection
    >
      <template v-if="colItem.key === 'selfSelection'" #header>
        <el-checkbox
          v-model="checkAllData" size="small"
          :indeterminate="isIndeterminate"
          @change="handleCheckAllDataChange"
        />
      </template>
      <template v-if="colItem.key === 'selfSelection'" #default="{row}">
        <el-checkbox v-model="row.isChecked" size="small" :key="row.id"  @change="(event) => handleSingleRowCheckChange(event, row)"/>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
    class="table-pagination"
    layout="prev, pager, next"
    :total="isApiPagination ? tablePaginationInfo.total : tableData.length"
    :page-size="tablePageSize"
    :current-page="tableCurrentPage"
    small
    @current-change="changeTableCurrentPage"
  />
</template>

<script setup>
import {defineProps, watch, ref, defineEmits, computed} from "vue";

const props = defineProps({
  tableData: {
    type: Array,
    default: () => []
  },
  columnData: {
    type: Array,
    default: () => []
  },
  isApiPagination: { // 是否前端分页
    type: Boolean,
    default: false
  },
  tablePaginationInfo: { // 接口分页时-table分页信息
    type: Object,
    default: () => {}
  },
});

const emit = defineEmits(['changeTableDataCheckStatus', 'changePageNum'])

const copyTableData = ref([])
const tableCurrentPage = ref(1)
const tablePageSize = ref(10)
const checkAllData = ref(false)
const isIndeterminate = ref(true)

watch(
    () => props?.tableData,
    (newVal) => {
      copyTableData.value = props?.tableData.slice(0, tablePageSize.value)
    }
)

watch(
    () => props?.tablePaginationInfo?.currentPage, // 监听页面变更-接口分页
    (newVal) => {
      tableCurrentPage.value = newVal
    }
)

const checkedNum = computed(() => {
  return props?.tableData?.filter(x => x.isChecked)?.length || 0
})

const changeTableCurrentPage = (page) => {
  tableCurrentPage.value = page
  if (props?.isApiPagination) { // 接口分页
    emit('changePageNum', page)
  } else { // 前端分页
    copyTableData.value = props?.tableData.slice(tablePageSize.value * (tableCurrentPage.value - 1), tablePageSize.value * tableCurrentPage.value)
  }
}

const publicInitCheckBoxStatus = () => {
  const tempStatus = checkedNum.value === props?.tableData?.length
  checkAllData.value = tempStatus
  isIndeterminate.value = !tempStatus
  if (checkedNum.value === 0) isIndeterminate.value = false
}

const handleCheckAllDataChange = (val) => { // 全选
  emit('changeTableDataCheckStatus', { type: 'all', value: val })
  publicInitCheckBoxStatus();
}

const handleSingleRowCheckChange = (val, row) => { // 单行选择
  row.isChecked = val
  if (checkedNum.value === 0) {
    row.isChecked = true
    return ElMessage({
      message: '至少勾选一项政策',
      type: 'warning',
    })
  }
  emit('changeTableDataCheckStatus', { type: 'single', value: val, id: row.id })
  publicInitCheckBoxStatus();
}

</script>

<style scoped lang="less">
.main-table {
  background-color: transparent;
  /deep/ .table-header {
    background: linear-gradient( 60deg, #0E5FFF 0%, #00FFFF 100%);
    .table-header-cell {
      background-color: transparent;
      color: white;
      border-bottom: 0;
    }
  }
  /deep/ .table-row {
    background: rgba(14,129,255,0.34);
    height: 10px !important;
    .el-table__cell {
      border-bottom: 0;
      padding-bottom: 0;
      color: white;
      font-size: 12px;
      padding-top: 0;
      .cell {
        //line-height: 20px;
      }
    }
  }
  /deep/ .table-row:hover {
    .el-table__cell {
      background: transparent;
    }
  }
  ::v-deep .el-table__body{
    //-webkit-border-horizontal-spacing: 13px;  // 水平间距
    -webkit-border-vertical-spacing: 5px;  // 垂直间距
  }
  /deep/ .el-table__inner-wrapper:before {
    height: 0;
  }
}
.table-pagination {
  display: flex;
  justify-content: center;
  /deep/ button {
    background-color: transparent;
    color: white;
  }
  /deep/ button:disabled {
    color: gray;
  }
  /deep/ ul li:not(.is-active) {
    color: white;
  }
  /deep/ ul li {
    background-color: transparent;
  }
}
</style>